<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: #f00;
            /* 1 定义弹性盒 */
            display: flex;
            /* 2 确定主轴方向  flex-direction: row(左右) / column(上下) */
            /* flex-direction: column; */

            /* 3 主轴对齐方式 justify-content:flex-start / flex-end / center / space-around / space-between / space-evenly*/

            /* 两边间距是中间的一半 */
            /* justify-content: space-around; */
            /* 两边没有间距 */
            /* justify-content: space-between; */
            /* 两边间距和中间间距是一样的 */
            /* justify-content: space-evenly; */

            /* 4 侧轴的对齐方式  align-items: flex-start / flex-end / center */
            /* align-items: center; */


            /* 5 内容超出时是否换行 --- 默认是不换行 flex-wrap */
            flex-wrap: wrap;
        }

        .a1,
        .a2,
        .a3 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <!-- 

        弹性布局：css3提供的一种新的布局方式
            1 定义弹性盒   display:flex 
            2 确定方向     flex-direction:row / column   默认是水平方向
            3 对齐方式
                主轴    justify-content:flex-start / flex-end / center / space-around / space-between / space-evenly
                交叉轴  align-items:flex-start / flex-end / center
            4 子元素超出是否换行  flex-wrap:wrap / nowrap   默认不换行

     -->

    <div class="box">
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>

        <div class="a1">1</div>
        <div class="a2">2</div>
        <div class="a3">3</div>
    </div>

</body>

</html>